<template>
  <div class="page-container">
    <div class="header">
      <div class="header__left">
        <img src="@/assets/images/details.png" alt="" />
        <span class="header__name">Da You</span>
      </div>
      <div class="header__id">ID:{{ infoStore.infomation.user_id }}</div>
    </div>
    <my-Assets></my-Assets>
    <buy-power :parentAd="infoStore.infomation.parentAddress"></buy-power>
    <my-team></my-team>
    <my-details></my-details>
    <my-inviter></my-inviter>
    <InvitePopup
      v-model:show="infoStore.showInvterCode"
      :invite-code="inviteCode"
      @confirm="onConfirm"
    ></InvitePopup>
  </div>
</template>

<script setup lang="ts">
import { useConWallet } from "@/hooks/concactWallet";

// 链接钱包
// 钱包地址
const walletAddress = ref<string>("");
const { account } = useConWallet();
// 入口检测\获取用户信息
import { useInfoStore } from "@/store/infoman";
const infoStore = useInfoStore();

// 输入邀请码弹框
const inviteCode = ref<string>("");
const onConfirm = (code: string) => {
  inviteCode.value = code;
  infoStore.getRegister(code, walletAddress.value);
};

onMounted(() => {
  // 监听账号的变化
  watch(account, async (newAccount) => {
    if (newAccount) {
      try {
        walletAddress.value = newAccount;
        await infoStore.getLogin(newAccount); // 等待 infoStore.getLogin 完成
        // 在 getLogin 完成后，顺序执行后续操作
        // infoStore.getBindWaitting();
      } catch (error) {
        console.error("Login failed:", error);
        // 可根据需要处理登录失败的情况
      }
    }
  });
});
</script>

<style lang="less" scoped>
@import "../styles/common.less";

.page-container {
  position: relative;
  overflow: hidden; /* 防止内容溢出 */

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(10% 0% at 50% 50%, #30d29c 0%, #9be7c9 100%);
    filter: blur(50px);
    z-index: -1; /* 确保背景不覆盖子内容 */
  }
}

.header {
  background: linear-gradient(91deg, #f8f8ed 0%, #f5f9f1 50%, #d4f5ea 100%);
  padding: 16px 9px 16px 0px;
  .flex-between();

  &__left {
    display: flex;
    align-items: center;
    background-color: #e8f3ec;
    border-top-right-radius: 33px;
    border-bottom-right-radius: 33px;
    padding: 8px 20px 8px 9px;

    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }

  &__name {
    margin-left: 7px;
    font-size: 17px;
    color: #178f5f;
    font-weight: bold;
  }

  &__id {
    font-size: @font-size-base;
    color: @text-color-secondary;
    padding: 10px 12px;
    background: linear-gradient(90deg, #f6f3d9 0%, #f8fcf2 29%, #cdf5e5 100%);
    box-shadow: 0px 2 3px 1px #bfe6cd;
    border-radius: 52px;
  }
}
</style>
